<!DOCTYPE html>
<html>
<head lang="zh-cn ">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="../app/css/bootstrap.css">
  <link rel="stylesheet" href="../app/css/introjs.css">
  <link rel="stylesheet" href="../app/css/style.css">
  <link rel="stylesheet" href="../app/css/bootstrap-responsive.min.css">
  <title>AngularIntro</title>
</head>
<body ng-app="app">
<div class="container-narrow" ng-controller="ccController"
     ng-intro-options="IntroOptions" ng-intro-method="CallMe"
     ng-intro-oncomplete="CompletedEvent" ng-intro-onexit="ExitEvent"
     ng-intro-onchange="ChangeEvent" ng-intro-onbeforechange="BeforeChangeEvent"
     ng-intro-onafterchange="AfterChangeEvent"
     ng-intro-autostart="ShouldAutoStart()">

  <div class="masthead">
    <ul id="step5" class="nav nav-pills pull-right">
      <li><a href="https://github.com/mendhak/angular-intro.js/tree/master/build"><i
          class='icon-black icon-download-alt'></i> Download</a></li>
      <li><a href="https://github.com/mendhak/angular-intro.js">Github</a></li>
    </ul>
    <h3 class="muted">ng-intro</h3>
  </div>

  <div class="jumbotron">
    <h1 id="step1">Angular Intro.js</h1>

    <p id="step4" class="lead">AngularJS directives for <a href="http://usablica.github.io/intro.js/"
                                                           onclick="window.open(this.href);return false;">intro.js</a>
    </p>
    <a class="btn btn-large btn-success" ng-click="CallMe();">Demo</a>
    <a class="btn btn-large btn-success" ng-click="CallMe(3);">Start at step 3</a>
  </div>

  <div class="row-fluid marketing">
    <div id="step2" class="span6">
      <h4>Setup</h4>

      <p>Include the JS and CSS files for intro.js, and angular-intro.min.js. Add the module <code>angular-intro</code>
        to your app declaration.</p>

      <h4>Options</h4>

      <p>Set the options like so: <code>ng-intro-options="IntroOptions"</code>. Define <code>$scope.IntroOptions</code>
        in your controller. The format is exactly the same as the <a
            href="https://github.com/usablica/intro.js#options">original</a>.</p>

      <h4>Method name</h4>

      <p>Pick a method name, <code>ng-intro-method="CallMe"</code>. You can invoke the intro from elsewhere by calling
        <code>CallMe();</code>. You can also specify a step number using <code>CallMe(3);</code>. To autostart, use
        <code>ng-intro-autostart="true"</code></p>

      <h4>Callbacks</h4>

      <p>You can get callbacks to your controller using the <code>ng-intro-oncomplete</code>,
        <code>ng-intro-onexit</code>, <code>ng-intro-onchange</code>, <code>ng-intro-onbeforechange</code> and <code>ng-intro-onafterchange</code>
        directives.</p>

      <p>See <a href="https://github.com/mendhak/angular-intro.js/blob/master/example/index.html">index.html</a> and <a
          href="https://github.com/mendhak/angular-intro.js/blob/master/example/app.js">app.js</a> for usage code.</p>
    </div>

    <div id="step3" class="span6">
      <h4><a href="https://github.com/mendhak/angular-intro.js/tree/master/example">Example</a></h4>

      <p>Set the options and method name:
		               <pre>
&lt;div ng-controller="MyController"
     ng-intro-options="IntroOptions"
     ng-intro-method="CallMe" ...
		               </pre>
      </p>

      <p>Options in the controller
		            <pre>
$scope.IntroOptions = {
steps:[
{
    element: '#step1',
    intro: "First tooltip"
},
{
    element: '#step4',
    intro: "Second tooltip",
    position: 'right'
},
...
		            </pre>
      </p>

      <p>Call it either way
      <pre>&lt;button ng-click="CallMe();"&gt;Go&lt;/button&gt;</pre>
      <pre>$scope.CallMe();</pre>
      </p>

    </div>
  </div>

  <hr>

</div>
<!--<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.8/angular.js"></script>-->
<script src="../app/lib/angular.js"></script>
<script src="../app/lib/intro.min.js"></script>
<script src="../app/lib/angular-intro.js"></script>
<script>

  var app = angular.module('app', ['angular-intro']);

  app.controller('ccController', ['$scope', function ($scope) {

    $scope.CompletedEvent = function () {
      console.log("Completed Event called");
    };

    $scope.ExitEvent = function () {
      console.log("Exit Event called");
    };

    $scope.ChangeEvent = function (targetElement) {
      console.log("Change Event called");
      console.log(targetElement);
    };

    $scope.BeforeChangeEvent = function (targetElement) {
      console.log("Before Change Event called");
      console.log(targetElement);
    };

    $scope.AfterChangeEvent = function (targetElement) {
      console.log("After Change Event called");
      console.log(targetElement);
    };

    $scope.IntroOptions = {
      steps: [
        {
          element: '#step1',
          intro: "This is the first tooltip."
        },
        {
          element: '#step2',
          intro: "<strong>You</strong> can also <em>include</em> HTML",
          position: 'right'
        },
        {
          element: '#step3',
          intro: 'More features, more fun.',
          position: 'left'
        },
        {
          element: '#step4',
          intro: "Another step.",
          position: 'bottom'
        },
        {
          element: '#step5',
          intro: 'Get it, use it.'
        }
      ],
      showStepNumbers: true,
      exitOnOverlayClick: true,
      exitOnEsc: true,
      nextLabel: '<strong>NEXT!</strong>',
      prevLabel: '<span style="color:green">Previous</span>',
      skipLabel: 'Exit',
      doneLabel: 'Thanks'
    };

    $scope.ShouldAutoStart = function () {
      return false;
    }

  }]);
</script>
</body>
</html>